<template>
	<div class="applet">
		<head-page :title="title" id="backstyle"></head-page>
		<div class="tac p-20 contact">电话：0591-83786666</div>
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			<van-swipe-item
				class="rel"
				v-for="(item, index) in bannerList"
				:key="index"
			>
				<div class="mask fcc">
					<van-icon name="play-circle-o" size="42" color="#fff" />
				</div>
				<video
					@click="playVideo(item)"
					class="video"
					x5-video-orientation="landscape"
					preload="auto"
					:src="item.posterUrl"
				></video>
			</van-swipe-item>
		</van-swipe>
		<div class="sub-banner m-t-10">
			<div
				:class="['banner-item tac', tabCurr == index ? 'active' : '']"
				@click="detail(item, index)"
				v-for="(item, index) in subBannerList"
				:key="index"
			>
				<div>
					<van-icon name="gift-o" size="28" />
				</div>
				<div class="m-t-10">{{ item.name }}</div>
			</div>
		</div>
		<div class="p-20">
			{{ info.name }}
		</div>
		<van-dialog
			v-model="show"
			@closed="closeVideo"
			:showConfirmButton="false"
			closeOnClickOverlay
		>
			<div class="preview">
				<video
					class="video"
					id="my-video"
					autoplay
					x5-video-orientation="landscape"
					preload="auto"
					:src="popInfo.posterUrl"
					controls="controls"
				></video>
			</div>
		</van-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			title: '小程序',
			bannerList: [
				{
					id: '1',
					name: '123',
					posterImg: '/profile/upload/2023/05/29/B1_20230529112726A006.png',
					posterUrl: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
				},
				{
					id: '2',
					name: '123',
					posterImg: '/profile/upload/2023/05/29/B3_20230529112808A008.png',
					posterUrl: 'http://www.w3school.com.cn/example/html5/mov_bbb.mp4'
				},
			],
			subBannerList: [
				{
					id: '1',
					name: '公司概况',
					posterUrl: ''
				},
				{
					id: '2',
					name: '产品简介',
					posterUrl: ''
				},
				{
					id: '3',
					name: '可行报告',
					posterUrl: ''
				},
				{
					id: '4',
					name: '市场分析',
					posterUrl: ''
				},
				{
					id: '5',
					name: '诚邀合作',
					posterUrl: ''
				},
			],
			tabCurr: 0,
			show: false,
			popInfo: {},
			info: {
				id: '1',
				name: '公司概况',
				posterUrl: ''
			},
		}
	},
	mounted() {
		// console.log(this.$refs.video0)
	},
	methods: {
		getImgUrl(img) {
			return this.montageImgUrl(img)
		},
		detail(item, index) {
			this.tabCurr = index
			this.info = item
		},
		closeVideo() {
			document.getElementById('my-video').pause()
			this.show = false
		},
		playVideo(item) {
			this.popInfo = item
			this.show = true
			// document.getElementById('my-video').play()
		}
	}
}
</script>

<style scoped>
.applet {
	width: 100%;
}
.top {
	border-bottom: 1px solid #dad9df;
}
.contact {
	font-size: 0.18rem;
	color: rgb(233, 24, 24);
}
.my-swipe {
	width: 100%;
}
.my-swipe video,
.preview video {
	width: 100%;
	object-fit: fill;
}
.my-swipe video {
	height: 1.8rem;
}
.my-swipe .mask {
	width: 100%;
	height: 1.8rem;
	background: rgba(0, 0, 0, 0.4);
	position: absolute;
	left: 0;
	top: 0;
}
.van-dialog {
	background: none;
	border-radius: 0;
}
.preview video {
	min-height: 2rem;
}
.sub-banner {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
}
.sub-banner::-webkit-scrollbar {
	display: none;
}
.banner-item {
	display: inline-block;
	width: 25%;
	padding: 0.12rem 0;
	color: #fff;
	font-size: 0.14rem;
	background-color: rgb(233, 24, 24);
}
.banner-item + .banner-item {
	margin-left: 0.1rem;
}
.banner-item.active {
	color: yellow;
}
</style>